<template>
  <el-menu
    active-text-color="#409eff"
    background-color="#304156"
    class="el-menu-vertical-demo"
    text-color="#fff"
    :collapse="isCollapse"
    router
    unique-opened
    :default-active="route.fullPath"
  >
    <el-menu-item index="/index">
      <i class="iconfont homepage"></i>
      <span>首页</span>
    </el-menu-item>

    <el-sub-menu v-for="item in menus" :index="'/' + item.name" :key="item.id">
      <template #title>
        <i class="iconfont" :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item
        v-for="sub in item.children"
        :index="'/' + item.name + '/' + sub.name"
        :key="sub.id"
      >
        <i class="iconfont" :class="sub.icon"></i>
        <span>{{ sub.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { inject, ref } from 'vue';
import { useUserStore } from '@/store/user';
const router = useRouter(); //全局路由
const route = useRoute(); //当前路由
const userStore = useUserStore(); //pinia
// 从 home 拿值, 控制侧边栏显隐
let isCollapse = inject('isCollapse');
// 渲染侧边栏 菜单项
const menus = userStore.routes;
// 让菜单有一个默认展开的数据
const defUrl = ref('/index');
</script>

<style scoped lang="less">
.el-icon {
  margin-right: 20px;
}
</style>
